<template>
  <div>
    <Header />
    <router-view></router-view>
    <!-- 
      Footer组件可能在某些路由下不展示,所以需要进行条件渲染:
        解决方式1:直接书写v-if条件渲染,接受当前路由的命名不等于XXX和XXX和XXX.....
        解决方式2:把插值语法的复杂逻辑直接书写成计算属性
        解决方式3:因为Footer是否展示和路由相关,所以我们可以让路由携带元信息代表当前是否展示
      
     -->
    <!-- <Footer v-if="$route.name !== 'Login' && $route.name !== 'Register'" /> -->
    <Footer v-if="FooterIsShow" />
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components: {
    Header,
    Footer,
  },
  mounted() {
    // console.log(this);
  },
  computed: {
    FooterIsShow() {
      return !this.$route.meta.FooterIsHidden;
    },
  },
};
</script>

<style></style>
